<template>
  <div class="main">
    <div v-if="dataModelBase.title" class="title">
      {{ dataModelBase.titleName }}
    </div>

    <div class="echart">
      <el-button
        class="echart__back"
        icon="iconfont icon-fanhui"
        circle
        @click="backMap"
      >
      </el-button>
      <v-chart ref="echarts" :option="option" :loading="loading" />
    </div>
  </div>
</template>

<script>
import widget from '@/mixins/widget'
import VChart from '@/plugins/v-chart'

export default {
  mixins: [widget],
  components: {
    VChart
  },
  data() {
    return {
      params: {
        map: {}
      },
      option: {
        visualMap: {
          type: 'piecewise',
          show: true, // 自定义图标代替视觉映射图标
          dimension: 0, // 指定维度，chartData.rows.value 二维数组中的列下标表示维度
          left: 20,
          bottom: 20,
          pieces: [
            { min: 1, max: 3, color: '#FF485D', label: '高危预警' }, // 红色
            { min: 4, max: 10, color: '#FFCF89', label: '危险预警' }, // 黄色
            { min: 10, max: 100, color: '#7BE198', label: '情况正常' }, //绿色
            { min: 1000, max: 2000, color: '#CCC', label: '没有数据' } // 灰色
          ]
        },
        tooltip: {
          trigger: 'item',
          formatter: params => {
            return `${params.name}：${
              params.data ? params.data.value[1] : '暂无数据'
            }`
          }
        },
        series: {
          type: 'map',
          map: 'china',
          label: {
            show: true
          },
          legend: {
            show: false
          },
          // 鼠标悬浮高亮图形样式
          emphasis: {
            itemStyle: {
              areaColor: '#F4D92D',
              opacity: 1,
              shadowColor: 'rgba(10,47,119,0.71)',
              shadowBlur: 10
            }
          },
          itemStyle: {
            areaColor: '#ccc',
            borderColor: 'rgba(39,39,39,0.16)'
          },
          data: []
        }
      }
    }
  },

  watch: {
    params: {
      deep: true,
      handler(newValue) {
        this.$emit('change', newValue)
      }
    }
  },

  mounted() {
    this.initClick()
  },

  methods: {
    initClick() {
      this.$nextTick(() => {
        const instance = this.$refs.echarts.instance
        instance.on('click', params => {
          if (['台湾', '香港', '澳门', '南海诸岛'].includes(params.name)) {
            return
          }

          let { name, data } = params
          this.params.map = { name, data }

          if (this.option.series.map !== 'china') return
          this.option.series.map = this.params.map.name
        })
      })
    },
    backMap() {
      if (this.option.series.map === 'china') return
      this.params.map = { ...this.params.map, name: 'china' }
      this.option.series.map = 'china'
    },
    async getData() {
      await this.$nextTick()
      const res = await this.httpRequest(this.interactParams)
      if (res) {
        this.option.series.data = res.data
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  font-size: 14px;
  .title {
    height: 45px;
    line-height: 45px;
    box-sizing: border-box;
    padding: 0 13px;
    border: 1px solid #e9e9e9;
    border-bottom: none;
  }
  .echart {
    height: calc(100% - 45px);
    border: 1px solid #e9e9e9;
    background-color: #f0f2f9;
    position: relative;
    &__back {
      position: absolute;
      right: 10px;
      top: 10px;
      z-index: 999;
    }
    &__btn {
      text-align: center;
      position: absolute;
      bottom: 10px;
      left: 50%;
      z-index: 999;
      transform: translate(-50%);
      border-radius: 15px;
      overflow: hidden;
    }
  }
}
</style>
